<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兼职帮 - 专业兼职招聘平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }

        a {
            text-decoration: none;
            color: #3498db;
            transition: color 0.3s;
        }

        a:hover {
            color: #2980b9;
        }

        button, .btn {
            cursor: pointer;
            border: none;
            border-radius: 4px;
            padding: 10px 20px;
            font-weight: 500;
            transition: all 0.3s;
        }

        .btn-primary {
            background-color: #3498db;
            color: white;
        }

        .btn-primary:hover {
            background-color: #2980b9;
        }

        .btn-secondary {
            background-color: #e74c3c;
            color: white;
        }

        .btn-secondary:hover {
            background-color: #c0392b;
        }

        /* 导航栏 */
        .navbar {
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .navbar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #3498db;
            display: flex;
            align-items: center;
        }

        .logo i {
            margin-right: 8px;
        }

        .nav-links {
            display: flex;
            list-style: none;
        }

        .nav-links li {
            margin-left: 25px;
        }

        .nav-links a {
            font-weight: 500;
            color: #555;
        }

        .nav-links a:hover, .nav-links a.active {
            color: #3498db;
        }

        .user-actions {
            display: flex;
            align-items: center;
        }

        .user-actions a {
            margin-left: 15px;
        }

        /* 页面内容区域 */
        .page-content {
            display: none;
            padding: 30px 0;
            min-height: 70vh;
        }

        .active-page {
            display: block;
        }

        /* 首页样式 */
        .hero {
            background: linear-gradient(rgba(52, 152, 219, 0.8), rgba(41, 128, 185, 0.8)), url('https://images.unsplash.com/photo-1507679799987-c73779587ccf?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80') center/cover;
            color: white;
            text-align: center;
            padding: 80px 0;
            border-radius: 8px;
            margin-bottom: 30px;
        }

        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }

        .hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
        }

        .search-box {
            display: flex;
            max-width: 700px;
            margin: 0 auto;
            background: white;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .search-box input, .search-box select {
            flex: 1;
            padding: 15px;
            border: none;
            outline: none;
        }

        .search-box input {
            border-right: 1px solid #eee;
        }

        .btn-search {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 15px 25px;
            cursor: pointer;
            font-weight: bold;
        }

        .section-title {
            text-align: center;
            margin: 40px 0 30px;
            font-size: 1.8rem;
            color: #2c3e50;
        }

        .job-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

        .job-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
            padding: 20px;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .job-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }

        .job-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: #2c3e50;
        }

        .company {
            color: #7f8c8d;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .salary {
            color: #e74c3c;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .location {
            color: #7f8c8d;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            margin-top: 15px;
        }

        .tags span {
            display: inline-block;
            background: #f3f7fc;
            color: #3498db;
            padding: 5px 10px;
            border-radius: 4px;
            margin-right: 8px;
            margin-bottom: 8px;
            font-size: 0.85rem;
        }

        .btn-view-all {
            display: block;
            width: fit-content;
            margin: 0 auto;
            background: #3498db;
            color: white;
            padding: 12px 25px;
            border-radius: 5px;
            font-weight: bold;
        }

        /* 表单样式 */
        .form-container {
            max-width: 500px;
            margin: 30px auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .form-title {
            text-align: center;
            margin-bottom: 25px;
            color: #2c3e50;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }

        .form-footer {
            text-align: center;
            margin-top: 20px;
        }

        /* 用户中心样式 */
        .user-profile {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
        }

        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin-right: 20px;
        }

        .profile-info h2 {
            margin-bottom: 5px;
        }

        .profile-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
        }

        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            color: #3498db;
            margin-bottom: 5px;
        }

        /* 页脚 */
        .footer {
            background: #2c3e50;
            color: white;
            padding: 40px 0 20px;
            margin-top: 60px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

        .footer-column h3 {
            margin-bottom: 20px;
            font-size: 1.2rem;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 10px;
        }

        .footer-links a {
            color: #ecf0f1;
        }

        .footer-links a:hover {
            color: #3498db;
        }

        .copyright {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .footer-content {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .navbar .container {
                flex-direction: column;
            }
            
            .nav-links {
                margin-top: 15px;
                justify-content: center;
            }
            
            .nav-links li {
                margin: 0 10px;
            }
            
            .user-actions {
                margin-top: 15px;
            }
            
            .search-box {
                flex-direction: column;
            }
            
            .search-box input, .search-box select {
                border-right: none;
                border-bottom: 1px solid #eee;
            }
            
            .profile-stats {
                grid-template-columns: 1fr;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="container">
            <a href="#" class="logo" onclick="showPage('home')">
                <i class="fas fa-briefcase"></i> 兼职帮
            </a>
            <ul class="nav-links">
                <li><a href="#" class="active" onclick="showPage('home')">首页</a></li>
                <li><a href="#" onclick="showPage('jobs')">兼职列表</a></li>
                <li><a href="#" onclick="showPage('post-job')">发布兼职</a></li>
                <li><a href="#" onclick="showPage('about')">关于我们</a></li>
            </ul>
            <div class="user-actions">
                <a href="#" class="btn btn-primary" onclick="showPage('login')">登录</a>
                <a href="#" class="btn btn-secondary" onclick="showPage('register')">注册</a>
            </div>
        </div>
    </nav>

    <!-- 首页 -->
    <div id="home" class="page-content active-page">
        <div class="container">
            <div class="hero">
                <h1>找到适合你的兼职工作</h1>
                <p>上千家企业的兼职机会，等你来发现</p>
                <div class="search-box">
                    <input type="text" placeholder="输入职位关键词">
                    <select>
                        <option>所有城市</option>
                        <option>北京</option>
                        <option>上海</option>
                        <option>广州</option>
                        <option>深圳</option>
                    </select>
                    <button class="btn-search">搜索</button>
                </div>
            </div>

            <h2 class="section-title">热门兼职</h2>
            <div class="job-list">
                <div class="job-card">
                    <div class="job-title">周末促销员</div>
                    <div class="company"><i class="fas fa-building"></i> 百事可乐有限公司</div>
                    <div class="salary"><i class="fas fa-money-bill-wave"></i> 150-200元/天</div>
                    <div class="location"><i class="fas fa-map-marker-alt"></i> 北京市朝阳区</div>
                    <div class="tags">
                        <span>周末班</span>
                        <span>日结</span>
                        <span>促销</span>
                    </div>
                </div>
                <div class="job-card">
                    <div class="job-title">家教辅导</div>
                    <div class="company"><i class="fas fa-building"></i> 学大教育</div>
                    <div class="salary"><i class="fas fa-money-bill-wave"></i> 80-120元/小时</div>
                    <div class="location"><i class="fas fa-map-marker-alt"></i> 上海市浦东新区</div>
                    <div class="tags">
                        <span>长期兼职</span>
                        <span>大学生优先</span>
                        <span>教育</span>
                    </div>
                </div>
                <div class="job-card">
                    <div class="job-title">餐厅服务员</div>
                    <div class="company"><i class="fas fa-building"></i> 海底捞火锅</div>
                    <div class="salary"><i class="fas fa-money-bill-wave"></i> 180-220元/天</div>
                    <div class="location"><i class="fas fa-map-marker-alt"></i> 广州市天河区</div>
                    <div class="tags">
                        <span>包餐</span>
                        <span>短期</span>
                        <span>服务员</span>
                    </div>
                </div>
            </div>

            <h2 class="section-title">最新兼职</h2>
            <div class="job-list">
                <div class="job-card">
                    <div class="job-title">数据录入员</div>
                    <div class="company"><i class="fas fa-building"></i> 云数据公司</div>
                    <div class="salary"><i class="fas fa-money-bill-wave"></i> 3000-5000元/月</div>
                    <div class="location"><i class="fas fa-map-marker-alt"></i> 远程工作</div>
                    <div class="tags">
                        <span>在家办公</span>
                        <span>灵活时间</span>
                        <span>数据录入</span>
                    </div>
                </div>
                <div class="job-card">
                    <div class="job-title">展会工作人员</div>
                    <div class="company"><i class="fas fa-building"></i> 国际会展中心</div>
                    <div class="salary"><i class="fas fa-money-bill-wave"></i> 200-250元/天</div>
                    <div class="location"><i class="fas fa-map-marker-alt"></i> 深圳市福田区</div>
                    <div class="tags">
                        <span>短期</span>
                        <span>展会</span>
                        <span>接待</span>
                    </div>
                </div>
                <div class="job-card">
                    <div class="job-title">外卖配送员</div>
                    <div class="company"><i class="fas fa-building"></i> 美团外卖</div>
                    <div class="salary"><i class="fas fa-money-bill-wave"></i> 5000-9000元/月</div>
                    <div class="location"><i class="fas fa-map-marker-alt"></i> 成都市武侯区</div>
                    <div class="tags">
                        <span>灵活时间</span>
                        <span>多劳多得</span>
                        <span>配送</span>
                    </div>
                </div>
            </div>
            <a href="#" class="btn-view-all" onclick="showPage('jobs')">查看所有兼职</a>
        </div>
    </div>

    <!-- 兼职列表页 -->
    <div id="jobs" class="page-content">
        <div class="container">
            <h2 class="section-title">所有兼职工作</h2>
            
            <div class="job-list">
                <div class="job-card">
                    <div class="job-title">周末促销员</div>
                    <div class="company"><i class="fas fa-building"></i> 百事可乐有限公司</div>
                    <div class="salary"><i class="fas fa-money-bill-wave"></i> 150-200元/天</div>
                    <div class="location"><i class="fas fa-map-marker-alt"></i> 北京市朝阳区</div>
                    <div class="tags">
                        <span>周末班</span>
                        <span>日结</span>
                        <span>促销</span>
                    </div>
                </div>
                <div class="job-card">
                    <div class="job-title">家教辅导</div>
                    <div class="company"><i class="fas fa-building"></i> 学大教育</div>
                    <div class="salary"><i class="fas fa-money-bill-wave"></i> 80-120元/小时</div>
                    <div class="location"><i class="fas fa-map-marker-alt"></i> 上海市浦东新区</div>
                    <div class="tags">
                        <span>长期兼职</span>
                        <span>大学生优先</span>
                        <span>教育</span>
                    </div>
                </div>
                <div class="job-card">
                    <div class="job-title">餐厅服务员</div>
                    <div class="company"><i class="fas fa-building"></i> 海底捞火锅</div>
                    <div class="salary"><i class="fas fa-money-bill-wave"></i> 180-220元/天</div>
                    <div class="location"><i class="fas fa-map-marker-alt"></i> 广州市天河区</div>
                    <div class="tags">
                        <span>包餐</span>
                        <span>短期</span>
                        <span>服务员</span>
                    </div>
                </div>
                <div class="job-card">
                    <div class="job-title">数据录入员</div>
                    <div class="company"><i class="fas fa-building"></i> 云数据公司</div>
                    <div class="salary"><i class="fas fa-money-bill-wave"></i> 3000-5000元/月</div>
                    <div class="location"><i class="fas fa-map-marker-alt"></i> 远程工作</div>
                    <div class="tags">
                        <span>在家办公</span>
                        <span>灵活时间</span>
                        <span>数据录入</span>
                    </div>
                </div>
                <div class="job-card">
                    <div class="job-title">展会工作人员</div>
                    <div class="company"><i class="fas fa-building"></i> 国际会展中心</div>
                    <div class="salary"><i class="fas fa-money-bill-wave"></i> 200-250元/天</div>
                    <div class="location"><i class="fas fa-map-marker-alt"></i> 深圳市福田区</div>
                    <div class="tags">
                        <span>短期</span>
                        <span>展会</span>
                        <span>接待</span>
                    </div>
                </div>
                <div class="job-card">
                    <div class="job-title">外卖配送员</div>
                    <div class="company"><i class="fas fa-building"></i> 美团外卖</div>
                    <div class="salary"><i class="fas fa-money-bill-wave"></i> 5000-9000元/月</div>
                    <div class="location"><i class="fas fa-map-marker-alt"></i> 成都市武侯区</div>
                    <div class="tags">
                        <span>灵活时间</span>
                        <span>多劳多得</span>
                        <span>配送</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 发布兼职页 -->
    <div id="post-job" class="page-content">
        <div class="container">
            <h2 class="section-title">发布兼职信息</h2>
            
            <div class="form-container">
                <h3 class="form-title">填写职位信息</h3>
                <form id="job-form">
                    <div class="form-group">
                        <label for="job-title">职位名称</label>
                        <input type="text" id="job-title" placeholder="例如：餐厅服务员" required>
                    </div>
                    <div class="form-group">
                        <label for="company">公司名称</label>
                        <input type="text" id="company" placeholder="例如：海底捞火锅" required>
                    </div>
                    <div class="form-group">
                        <label for="salary">薪资待遇</label>
                        <input type="text" id="salary" placeholder="例如：180-220元/天" required>
                    </div>
                    <div class="form-group">
                        <label for="location">工作地点</label>
                        <input type="text" id="location" placeholder="例如：北京市朝阳区" required>
                    </div>
                    <div class="form-group">
                        <label for="job-type">工作类型</label>
                        <select id="job-type" required>
                            <option value="">请选择工作类型</option>
                            <option value="promotion">促销</option>
                            <option value="education">教育</option>
                            <option value="service">服务员</option>
                            <option value="delivery">配送</option>
                            <option value="data">数据录入</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="description">职位描述</label>
                        <textarea id="description" rows="5" placeholder="详细描述工作内容和要求..." required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary" style="width: 100%;">发布职位</button>
                </form>
            </div>
        </div>
    </div>

    <!-- 登录页 -->
    <div id="login" class="page-content">
        <div class="container">
            <div class="form-container">
                <h3 class="form-title">用户登录</h3>
                <form id="login-form">
                    <div class="form-group">
                        <label for="login-email">邮箱/手机号</label>
                        <input type="text" id="login-email" placeholder="请输入邮箱或手机号" required>
                    </div>
                    <div class="form-group">
                        <label for="login-password">密码</label>
                        <input type="password" id="login-password" placeholder="请输入密码" required>
                    </div>
                    <button type="submit" class="btn btn-primary" style="width: 100%;">登录</button>
                    <div class="form-footer">
                        <p>还没有账号？ <a href="#" onclick="showPage('register')">立即注册</a></p>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 注册页 -->
    <div id="register" class="page-content">
        <div class="container">
            <div class="form-container">
                <h3 class="form-title">用户注册</h3>
                <form id="register-form">
                    <div class="form-group">
                        <label for="register-name">姓名</label>
                        <input type="text" id="register-name" placeholder="请输入您的姓名" required>
                    </div>
                    <div class="form-group">
                        <label for="register-email">邮箱</label>
                        <input type="email" id="register-email" placeholder="请输入邮箱" required>
                    </div>
                    <div class="form-group">
                        <label for="register-phone">手机号</label>
                        <input type="tel" id="register-phone" placeholder="请输入手机号" required>
                    </div>
                    <div class="form-group">
                        <label for="register-password">密码</label>
                        <input type="password" id="register-password" placeholder="请设置密码" required>
                    </div>
                    <div class="form-group">
                        <label for="register-confirm">确认密码</label>
                        <input type="password" id="register-confirm" placeholder="请再次输入密码" required>
                    </div>
                    <button type="submit" class="btn btn-primary" style="width: 100%;">注册</button>
                    <div class="form-footer">
                        <p>已有账号？ <a href="#" onclick="showPage('login')">立即登录</a></p>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 关于我们页 -->
    <div id="about" class="page-content">
        <div class="container">
            <h2 class="section-title">关于我们</h2>
            
            <div style="background: white; padding: 30px; border-radius: 8px; box-shadow: 0 3px 15px rgba(0,0,0,0.08);">
                <h3 style="margin-bottom: 20px; color: #2c3e50;">兼职帮 - 专业兼职招聘平台</h3>
                <p style="margin-bottom: 15px;">兼职帮成立于2020年，是一家专注于为学生和求职者提供安全、可靠兼职信息的平台。我们与上千家企业合作，每日更新最新兼职岗位，为求职者提供最便捷的兼职寻找体验。</p>
                
                <h4 style="margin: 25px 0 15px; color: #3498db;">我们的使命</h4>
                <p style="margin-bottom: 15px;">为求职者提供安全、可靠的兼职机会，帮助企业找到合适的兼职人员，促进灵活就业市场的发展。</p>
                
                <h4 style="margin: 25px 0 15px; color: #3498db;">联系我们</h4>
                <p style="margin-bottom: 8px;"><i class="fas fa-envelope"></i> 邮箱：contact@jianzhibang.com</p>
                <p style="margin-bottom: 8px;"><i class="fas fa-phone"></i> 电话：400-123-4567</p>
                <p><i class="fas fa-map-marker-alt"></i> 地址：北京市海淀区中关村大街1号</p>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>关于我们</h3>
                    <ul class="footer-links">
                        <li><a href="#">公司简介</a></li>
                        <li><a href="#">团队介绍</a></li>
                        <li><a href="#">发展历程</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>帮助中心</h3>
                    <ul class="footer-links">
                        <li><a href="#">如何找工作</a></li>
                        <li><a href="#">如何发布工作</a></li>
                        <li><a href="#">常见问题</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>法律条款</h3>
                    <ul class="footer-links">
                        <li><a href="#">用户协议</a></li>
                        <li><a href="#">隐私政策</a></li>
                        <li><a href="#">免责声明</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>联系我们</h3>
                    <ul class="footer-links">
                        <li><a href="#">联系方式</a></li>
                        <li><a href="#">意见反馈</a></li>
                        <li><a href="#">加入我们</a></li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>© 2023 兼职帮 - 专业兼职招聘平台 All Rights Reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        // 页面切换功能
        function showPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.page-content').forEach(page => {
                page.classList.remove('active-page');
            });
            
            // 显示选中的页面
            document.getElementById(pageId).classList.add('active-page');
            
            // 更新导航栏活动状态
            document.querySelectorAll('.nav-links a').forEach(link => {
                link.classList.remove('active');
            });
            
            // 滚动到顶部
            window.scrollTo(0, 0);
            
            // 如果是首页，设置首页链接为活动状态
            if (pageId === 'home') {
                document.querySelector('.nav-links a').classList.add('active');
            }
        }
        
        // 表单提交处理
        document.getElementById('login-form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('登录功能提交！在实际应用中，这里会处理登录逻辑。');
            showPage('home');
        });
        
        document.getElementById('register-form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('注册功能提交！在实际应用中，这里会处理注册逻辑。');
            showPage('home');
        });
        
        document.getElementById('job-form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('职位发布成功！在实际应用中，这里会处理职位发布逻辑。');
            showPage('jobs');
        });
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 默认显示首页
            showPage('home');
        });
    </script>
</body>
</html>